<template>
  <div class="color-confirmed">
    <el-timeline v-if="publicState.object">
      <template :key="hue" v-for="(colors, hue) in publicState.object.confirmed">
        <el-timeline-item :timestamp="`hue: ${hue}`" placement="top">
          <div class="color-confirmed__group">
            <ColorView :append="false" :key="color" :color="color" v-for="color in colors" />
          </div>
        </el-timeline-item>
      </template>
    </el-timeline>
  </div>
</template>

<script lang="ts" setup>
import { useColorStore } from '@/inject/stores/color'
import { ColorView } from '../ColorView'

defineOptions({ name: 'ColorConfirmed' })

const { publicState } = useColorStore()
</script>

<style lang="scss" scoped>
.color-confirmed {
  overflow-y: auto;
  margin: 10px 0 10px 10px;
  flex: 1;

  :deep(.el-timeline) {
    padding-left: 0;
  }

  .color-confirmed__group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }

  :deep(.el-timeline-item:last-of-type) {
    padding-bottom: 0;
  }
}
</style>
